<template>
    <div @dblclick="x" class="c-el-table-cell">
        <input v-model.lazy="value" v-if="col.editable && onEdit"
               style="border:0; height:40px; width: 100%"
        />
        <span v-else><i :class="icon" v-if="icon"></i>{{label}}</span>
    </div>
</template>
<script>
    export default {
        props: {
            col: Object,
            row: Object
        },
        data () {
            const v = this.row[this.col.name]
            return {
                onEdit: false,
                value: v
            }
        },
        watch: {
            value () {
                this.$emit('eidt', this.row, this.col, this.value)
                this.onEdit = false
            }
        },
        computed: {
            label () {
                const v = this.row[this.col.name]
                // 默认情况
                if (!this.col.holder) return v
                // holder function
                if (this.col.holder === 'holder-function') {
                    let holderFun = this.col['holderFunction']
                    if (!holderFun) {
                        throw new Error('Not found holder function!')
                    }
                    return holderFun(v, this.col)
                }
                // switch
                if (this.col.holder === 'switch') {
                    return v ? this.col.activeText : this.col.inactiveText
                }
                if (this.col.holder === 'radio-group' ||
                    this.col.holder === 'checkbox-group' ||
                    this.col.holder === 'select'
                ) {
                    let item = this.col.items.find(item => item.value === v)
                    return item ? item.label : v
                }
                return v
            },
            icon () {
                const v = this.row[this.col.name]
                if (this.col.holder === 'switch') {
                    return v ? this.col.activeIconClass : this.col.inactiveIconClass
                }
                return undefined
            }
        },
        methods: {
            x () {
                this.onEdit = !this.onEdit
            },
            blur () {
                this.onEdit = false
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
    .c-el-table-cell
        input
            height 30px
            border #ffffff 1px solid
            float left
            zoom 1
            outline none
</style>
